{% extends "base.html" %}

{% block title %}
轮播图管理首页
{% endblock %}

{% block header %}
轮播图管理
{% endblock %}

{% block functions %}

<button class="btn btn-success btn-w-md" type="button" data-toggle="modal" data-target="#addModal">上传轮播图</button>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">轮播图上传</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="form-group" style="height: 100px">
                        <div class="col-xs-12 m-b-10">
                            <input class="form-control" type="text" id="name" name="name"
                                   placeholder="请输入轮播图名称...">
                        </div>

                        <div class="col-xs-12">
                            <input class="form-control" type="file" id="file" name="file" placeholder="请选择图片...">
                        </div>
                    </div>
                </form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save">点击保存</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block trs %}
<th>编号</th>
<th>名称</th>
<th>图片</th>
<th>操作</th>

{% endblock %}

{% block tds %}
{% for item in data %}
<tr id="item-{{ item.id }}">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td><img src="{{ item.url }}" style="width: 100px" /></td>
    <td><button type="button" class="btn btn-cyan btn-w-md delete" data-id="{{ item.id }}">删除</button></td>

</tr>

{% endfor %}
{% endblock %}



{% block scripts %}


<script>
    $(function () {
        $('#save').on('click', function () {
            const name = $('#name').val();
            const file = $('#file')[0].files[0];
            const formData = new FormData();
            formData.append('name', name);
            formData.append('file', file);
            $.ajax({
                url: '{{url_for("admin_swiper.add")}}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    $('#addForm')[0].reset();
                    $('#addModal').modal('hide');
                    alert(res.message);
                    location.reload()
                },
                error: function (xhr, status, error) {
                    alert('上传失败');
                }
            })
        })

        $('.delete').on('click', function () {
            const id = $(this).data('id')
            $.ajax({
                url: "{{ url_for('admin_swiper.delete', id='REPLACE_ID') }}".replace('REPLACE_ID', id),
                type: 'delete',
                success: function (res) {
                    alert(res.message)
                    $(`#item-${id}`).remove(); // 移除对应的表格行
                },
                error: function (xhr, status, error) {
                    alert('删除失败');
                }
            })
        })
    })
</script>


{% endblock %}